<template>
  <div class="box_login">
    <div class="el-loading-spinner">
      <svg viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path">

        </circle>
      </svg>
    </div>
    <div class="login" :style="{backgroundImage: 'url(' +bg + ')'}">
      <div class="demo-ruleForm login-container">

        <div style="position: absolute;left: 50%;top: 43%;z-index: 11113;transform:translate(-50%,-50%) " v-if="loading">
          <img src="../../assets/loding.gif" alt="" >
          <!--<div style="text-align: center;font-size: 20px;color: #EF6B0C;z-index: 12222">登 录 中</div>-->
        </div>
        <div style="background-color: #f0f0f0; opacity:0.7;position: absolute;width: 100%;height: 100%;z-index: 11112;left: 0;top: 0;border-radius: 10px;" v-if="loading">

        </div>
        <div>
          <div class="login_img"></div>
          <div class="login_boder">

          </div>
        </div>
        <h1 class="title" style="color: #979D83;font-size: 20px;">你家微社区管理系统</h1>
        <input type="text" v-model="form.acct" auto-complete="off" required="required" id="login_acc"
               placeholder="用户名/手机号" @keyup.enter="_focus()">
        <input type="password" v-model="form.password" placeholder="密码" id="login_psw"
               @keyup.enter="yourHandler()">
        <p id="p1" @click="go_fo">忘记密码</p>
        <el-button type="primary" id="login_dl"
                   @click="submit" v-on:keyup.space="show" v-loading.fullscreen.lock="fullscreenLoading">登录
        </el-button>
      </div>
    </div>
    <div style="background-color:white;width: 100%;height: 100%;position: absolute;top:70%;margin-left:30px;">
      <el-row style="background-color: white;">
        <el-col :span="24" style="background-color: white;text-align: center;">
          <h2>联系我们</h2>
          <p style="font-size:12px;color:#656D78;">一&nbsp;&nbsp;&nbsp;Call&nbsp;&nbsp;&nbsp;一</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="background-color: white;padding-left:100px;">
          <p style="font-size:14px;color:#656D78;">固话</p>
          <p style="font-size:12px;">020-37574204</p>
          <p style="font-size:12px;">&nbsp;</p>

        </el-col>
        <el-col :span="8" style="background-color: white;padding-left:100px;">
          <p style="font-size:14px;color:#656D78;">手机</p>
          <p style="font-size:12px;">15989169623</p>
          <p style="font-size:12px;">17727757781</p>
        </el-col>
        <el-col :span="8" style="background-color: white;padding-left:100px;">
          <p style="font-size:14px;color:#656D78;">Email</p>
          <p style="font-size:12px;">907432791@qq.com</p>
          <p style="font-size:12px;">17727757781@189.cn</p>

        </el-col>
      </el-row>
      <el-row style="text-align: center;">
        <el-col :span="24" style="background-color: white;letter-spacing:1px;font-size:12px; ">
          <span>地址:广东省广州市海珠区新港中路354号珠影蓝谷204</span>
        </el-col>
      </el-row>
      <el-row style="text-align: center;">
        <el-col :span="24" style="background-color: white;letter-spacing:2px;color:#656D78;font-size:14px;">
          <span>Copyright © 2017 广州市你家互联网科技有限公司</span>
        </el-col>
      </el-row>
    </div>

    <!--账户不存在或密码错误提示弹框-->
    <el-dialog style="text-align: center;" :visible.sync="dlvb" size="tiny" :modal="false">
      <span>{{c_data}}</span>
      <span slot="footer" class="dialogBtn">
        <el-button type="primary" @click="dlvb=false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog style="text-align: center;"
               :visible.sync="dialogVisible"
               size="tiny">
      <span>{{errData}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false" class="dialog_qd" id="queding">确 定</el-button>
  </span>
    </el-dialog>

  </div>

</template>

<script type="text/ecmascript-6">
  import md5 from 'blueimp-md5'
//  import uuid from 'uuid-js'
  import prit from '../../../static/fingerprint'
  console.log(prit)
  export default {
    data() {
      return {
        msg: '',
        errData:'',
        storeId: '',
        show: false,
        isAlert: false,
        isValidated: false,
        isDebug: true,
        checked: true,
        dialogVisible: false,
        dlvb: false,
        c_data: '',
        fullscreenLoading: false,
        bg: require('../../assets/login_bg.png'),
        token: '',
        expiredTime: '',
        uuid:'',
        loading:false,
        form: {
          acct: '',
          password: '',
        },
        rules: {
          acct: [
//            { required:true,message: "请输入手机号", trigger: 'blur' },
//            {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
          ],
          password: [
//            {required: true, message: '请输入密码', trigger: 'blur'},
//            {min: 6, message: '长度最少为6个字符', trigger: 'blur'}
          ]
        }
      };
    },
    watch: {
      "dlvb"(val, oldVal){
        if (val == true) {
          let _this = this;
          window.onkeydown = function (e) {
            if (e.keyCode==13) {
              _this.dlvb = false
            }
          }
        }
      },
      "dialogVisible"(val, oldVal){
        if (val == true) {
          let _this = this;
          window.onkeydown = function (e) {
            if (e.keyCode==13) {
              _this.dialogVisible = false
            }
          }
        }
      }
    },
    methods: {
      submit(){
        if(this.dlvb||this.dialogVisible){
          console.log('先关闭弹窗')
          return
        }
        //将密码用MD5加密
        if(!this.form.acct){
          this.dlvb = true;
          this.c_data = `请输入您的账号`
          return
        }
        console.log(psw)
        let psw = md5(this.form.password)
        if(!psw){
          this.dlvb = true;
          this.c_data = `请输入您的密码`
          return
        }
        let postData = {
          "account": this.form.acct,
          "password": psw,
          "platform": "MC_WEB",
          "deviceId": this.uuid,
          "ipv4" : '' ,
          "platformVer":''
        };
        this.loading=true
        this.$http.post(`${this.$store.state.path}storeLogin/login`, postData)
          .then((res) => {
            console.log(res.body)
            this.loading=false
//            return
            if (res.body.result) {
              this.token = res.body.result.token;
              this.expiredTime = res.body.result.expiredTime
              this.$store.state.userName = res.body.result.storeName
              this.$store.state.storeId =  res.body.result.storeId
              this.$store.state.psw = postData.password;//用户密码
              let MC_storeData={};
              MC_storeData.userName = res.body.result.storeName
              MC_storeData.storeId = res.body.result.storeId
              //长期保存
              MC_storeData=JSON.stringify(MC_storeData);
              if(window.localStorage){
                localStorage.setItem('MC_storeData',MC_storeData)
              }else{
                alert('您的浏览器不支持localStorage,请更换浏览器或者升级再试')
                return
              }
            }
            var data = res.body;
            //账号不存在时，提示
            if(!res.body.result){
                this.dlvb = true;
                this.c_data = res.body.msg
                return
            }
            if(window.localStorage){

            }else{
              alert('您的浏览器不支持localStorage,请更换浏览器或者升级再试')
              return
            }
            this.$store.state.BDLogin = false
            this.$router.push({path: `/cardCouponsList`});
          })
          .then(()=>{
            this.loading=false
          })
      },
      _focus(){//密码输入框获取焦点
        let input = document.getElementById("login_psw");
        input.focus();
      },
      yourHandler() {
        this.submit()
        let input = document.getElementById("login_psw");
        input.blur();
      },
      go_fo(){

      }
    },
    created(){
      if(window.localStorage&&localStorage.getItem("token")){
        this.$http.get(`${this.$store.state.path}storeLogin/logout/${this.$route.params.storeId}/${localStorage.getItem("uuid")}`)
          .then(res => {
            console.log(res.body)
          }, res => {

          })
      }
      if(window.localStorage){
        localStorage.removeItem("storeId");
        localStorage.removeItem("token");
        localStorage.removeItem("expiredTime");
        localStorage.removeItem("menus");
        localStorage.removeItem("storeIndustry");
        localStorage.removeItem("subStoreCashType");
        localStorage.removeItem("partnerType");
      }else{
        alert('您的浏览器不支持localStorage,请更换浏览器或者升级再试')
        return
      }
      let fp1 = new prit();
      let onlyFlag = fp1.get()
      this.uuid = onlyFlag
      if(window.localStorage&&!localStorage.getItem("uuid")){
        this.uuid = onlyFlag
        localStorage.setItem("uuid",  this.uuid);//uuid判断当前设备唯一标识
      }
      this.uuid = onlyFlag
      if(window.client&&window.client.ws){
        console.log('验证ws是否连接')
        let func = client.ws.onclose
        console.dir(func)
        func();
      }
    }
  }
</script>


<style scoped>
  #queding {
    background-color: #F58534 !important;
    border-color: #F58534 !important;
  }
  p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
  }
  .el-button--primary {
    color: #fff;
    background-color: white !important;
    border-color: white !important;
  }

  body {
    background: none;
  }

  .el-button--primary {
    color: #fff;
    background-color: white;
    border-color: white;
  }

  .el-button--primary:focus, .el-button--primary:hover {
    background-color: white !important;
    border-color: white !important;
  }

  #login_dl {
    display: block;
    width: 80%;
    height: 12%;
    margin: 0 auto;
    margin-top: 5%;
    color: #A2A2A2;
    /*border: 1px solid #ECEBEB!important;*/
    /*border-radius: 10px;*/
    background-image: url("../../assets/login_dl.png");
    background-size: 100% 100%;
    /*background-color: #FFFFFF!important;*/
  }

  #login_acc {

    margin-top: -10px !important;
  }

  #login_psw, #login_acc {
    display: block;
    margin: 0 auto;
    padding-left: 20px;
    width: 80%;
    height: 13%;
    background-color: #F2F2F2;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid #E1E8CE;

  }

  #p1 {
    margin: 10px 0;
    color: #979E88;
    font-size: 14px !important;
    text-align: right;
    padding-right: 30px;
    text-decoration: underline;
    cursor: pointer;
  }

  #login_psw {
    margin-top: 5%;
  }

  #login_acc > .el-input__inner {
    background-color: #F7F4D9 !important;
    border-radius: 20px;
  }

  .login_boder {
    /*border-bottom: 3px solid #D8E3D3;*/
    width: 50%;
    margin: 0 auto;
    margin-bottom: 2%;
  }

  .login_img {
    margin: 0 auto;
    margin-bottom: 10px;
    background-image: url('../../assets/logo.png');
    background-size: 100%;
    width: 136px;
    height: 58px;
  }

  .login .login-container {
    width: 23%;
    height: 72%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    margin-right: 20px;
    box-shadow: 1px 1px 5px 5px rgba(136,136,136,.2);
  }

  .box_login {
    /*left: -30px;*/
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    /*margin-left: -200px;*/

  }

  #app {
    /*background-image: url("../assets/login_bg.png");*/
  }

  .login {
    position: absolute;
    overflow: hidden;
    z-index: 100;
    margin-top: -74px;
    /*background-image: url("../assets/login_bg.png");*/
    background-repeat: no-repeat;
    /*background-size: 100% 75%;
    height:100%;*/
    background-size: auto 100%;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    width: 100%;
    height: 75%;
    box-shadow: 5px 5px 10px lightgray;
  }

  .login .c_right {

  }

  .el-row {
    background-color: #1F2D3D !important;
  }

  h4 {
    margin-bottom: 20px;
    color: #888888;
  }

  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    position: absolute;
    margin-top: 100px;
    height: 72%;
    right: 60px;
    width: 400px;
    padding: 20px 15px 15px 15px;
    background: #fff;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0 0 35px 0;
    float: left;
  }

  .dialog-footer .dialog_qd {
    background-color: #F58534;
    border-color: #F58534;
  }

  .dialog-footer .dialog_qd:hover {
    background-color: #EF6B0C !important;
    border-color: #EF6B0C !important;
  }

  .dialogBtn {
    color: black;
  }

  .dialogBtn .el-button {
    color: #fff;
    width: 80px;
    background: #F58534 !important;
  }

  .dialogBtn .el-button:hover {
    background: #E9573E !important;
  }
</style>
